<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript" src="flexible.min.js">
    </script>
    <title>主页</title>
</head>
<style>
    /* 初始化 */
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    ul {
        list-style: none;
    }

    .clearfix:after;
    .clearfix:before {
        content: "";
        display: block;
        clear: both
    }

    /* body背景，规定字体 */
    body {
        background: url('./img/beijing.png') no-repeat;
        background-size: cover;
        color: #0f5000;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }

    /* 头部区域 */
    .indexTop {
        width: 100%;
        height: 50px;
    }

    .indexTop>img {
        width: 100%;
    }

    /* 主体 */
    .container {
        width: 65%;
        height: 70%;
        position: relative;
        left: 58%;
        top: 40%;
        transform: translate(-50%,-50%);
        padding: 0px
        margin:0 auto;
        display:flex;
        flex-direction:column;
		justify-content:space-around;
		items-align:center;
    }

    .container li {
        width: 15%;
        text-align: center;
        float: left;
        margin: 10px;
        padding:10px;
        position: relative;
        overflow: hidden
    }
    .imgbox{
        width:100%;
        height:100%
    }
    .imgbox img{
        width:100%;
        height:100%;
    }
    .container li .imgbox,.container li .text{
        margin-top: 5px;
        font-size:8px;
    }

</style>

<body>
<!-- 头部 -->
<div class="indexTop" >
    <img src="./img/top01.png" alt="">
</div>
<!-- 主体 -->
<div class="container" >
    <ul class="clearfix">
        <a href="">
            <li>
                <div class="imgbox" id='0' onclick="nativeMethod.toJumpActivity(0)"><img src="./img/tubiao0007.png" alt=""></div>
                <div class="text">工厂灯光</div>
            </li>
        </a>
        <a href="">
        <li>
            <div class="imgbox" id='1' onclick="nativeMethod.toJumpActivity(1)"><img src="./img/tubiao0001.png" alt=""></div>
            <div class="text">工厂空调</div>
        </li>
        </a>
        <a href="#">
            <li>
                <div class="imgbox" id='2' onclick="nativeMethod.toJumpActivity(2)"><img src="./img/tubiao0005.png" alt=""></div>
                <div class="text">人才市场</div>
            </li>
        </a>
        <a href="#">
            <li>
                <div class="imgbox" id='3' ><img src="./img/tubiao0006.png" alt=""></div>
                <div class="text">自动补人</div>
            </li>
        </a>
    </ul>
    <ul class="clearfix">
        <a href="#">
            <li>
                <div class="imgbox" id='4' onclick="nativeMethod.toJumpActivity(4)"><img src="./img/tubiao0002.png" alt=""></div>
                <div class="text">供货列表</div>
            </li>
        </a>
        <a href="#">
        <li>
            <div class="imgbox" id='5' onclick="nativeMethod.toJumpActivity(5)"><img src="./img/tubiao0003.png" alt=""></div>
            <div class="text">购买原材料</div>
        </li>
        </a>
        <a href="#">
        <li>
            <div class="imgbox" id='6'><img src="./img/tubiao0009.png" alt=""></div>
            <div class="text">问题车辆仓库</div>
        </li>
        </a>
        <a href="#">
        <li>
            <div class="imgbox" id='7' onclick="nativeMethod.toJumpActivity(7)"><img src="./img/tubiao0008.png" alt=""></div>
            <div class="text">成品车辆仓库</div>
        </li>
        </a>
    </ul>

</div>


</body>

</html>